<template>
		<view class="container">
		<form @submit="formSubmit" @reset="formReset">
			<view class="item uni-column">
				<view class="title">switch</view> 
				<view>
			<switch name="switch" />
			</view>
		</view>
		<view class="item uni-column">
			<view class="title">radio</view> 
			<radio-group name="radio">
				<label>
					<radio value="radio1"/><text>选项一</text>
		</label>
		<label>
		<radio value="radio2" /><text>选项二</text>
		</label> 
		</radio-group>
		</view>
		<view class="item uni-column">
		<view class="title">checkbox</view>
		<checkbox-group name="checkbox">
		<label>
		<checkbox value="checkbox1" /><text>选项一</text>
		</label>
		<label>
		<checkbox value="checkbox2"/><text>选项二</text>
		</label>
		</checkbox-group> 
		</view>
		<view class="item uni-column">
		<view class="title">slider</view>
		<slider value="50" name="slider" show-value></slider>
		</view>
		<view class="item uni-column">
		<view class="title">input</view>
		<input class="uni-input" name="input" placenolder="这是一个输入框"/>
		</view> 
		<view >
		<button form-type="submit">Submit</button> 
		<button type="default" form-type=" reset">Reset</button>
		</view> 
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			formSubmit: function (e) {
			console.log('form发生了submit事件，携带数据为：'+ JSON.stringify(e.detail.value))
			var formdata = e.detail.value
			uni.showModal ({
			content:'表单数据内容：'+ JSON.stringify (formdata),
			showCancel: false
			});
			},
			formReset : function(e){
			console .log('清空数据')
			}
		}
	}
</script>

<style>
			switch {
			transform: scale (0.7);
			}
			radio
			{transform: scale (0.7) ;}
			checkbox
			{transform: scale (0.7);}
			button{
				
			}
.container{
			padding: 40upx;
			}
			.item .title {
				padding: 20rpx 0;
			}
</style>
